<html xmlns="http://www.w3c.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:pe="http://primefaces.org/ui/extensions">
<h:head>
	<script type="text/javascript">
		//<![CDATA[
		//debe usarse los \\:  en lugar de : en los selectores de JQuery
		$(document).ready(function() {
			wizardSetCurrentPageStyle('form_wizard:personalData');

		});
		//]]>
	</script>
</h:head>

<h:body>
	<h:form id="form_personal_data">
	 	<h:inputHidden id="ruatStatus" value="#{aSession.selectedRuatRegister.status}" />
		<h2>
			<h:outputLabel value="#{i18n['lbl.owner.personal_data.title']}" />
		</h2>
		<p:panel visible="#{aSession.selectedRuatRegister.editing}">
		<div class="clearfix common-panel" >
            <h:outputLabel  value="Existe un registro con el mismo tipo de identificación y número de identificación, se cargan los datos para edición" />
		</div>
		</p:panel>
		<div class="clearfix common-panel">
			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.personal_data.name1']}" />
						<span class="required">*</span>
					</div>
					<div class="clearfix text-align-left">
						<p:inputText id="firstName" maxlength="30" value="#{aSession.selectedRuatRegister.firstName}"
							required="true" requiredMessage="#{i18n['cmpnt.required']}">
						</p:inputText>
						<p:message for="firstName" />
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.personal_data.name2']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText id="secondName" maxlength="30" value="#{aSession.selectedRuatRegister.secondName}"
							required="false" requiredMessage="#{i18n['cmpnt.required']}" />
						<p:message for="secondName" />
					</div>
				</div>
			</div>

			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.lastname1']}" />
						<span class="required">*</span>
					</div>
					<div class="clearfix text-align-left">
						<p:inputText id="firstLastName" maxlength="30" value="#{aSession.selectedRuatRegister.firstLastName}"
							required="true" requiredMessage="#{i18n['cmpnt.required']}" />
						<p:message for="firstLastName" />
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.lastname2']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText id="secondLastName" maxlength="30"
							value="#{aSession.selectedRuatRegister.secondLastName}" />
						<p:message for="secondLastName" />
					</div>
				</div>
			</div>

			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.birth_date']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:calendar id="bornDate" value="#{aSession.selectedRuatRegister.bornDate}"
							 required="true" requiredMessage="#{i18n['cmpnt.required']}"
							navigator="true" pattern="MM/dd/yyyy" maxdate="calwidget.today()" mindate="01/01/1900" yearRange="c-100:c+100" />
						<p:message for="bornDate" />
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.personal_data.sex']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneRadio id="sex" value="#{aSession.selectedRuatRegister.sex}" required="true" requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.man']}" itemValue="5" />
							<f:selectItem itemLabel="#{i18n['cmpnt.woman']}" itemValue="6" />
						</p:selectOneRadio>
						<p:message for="sex" />
					</div>
				</div>

			</div>

			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel value="#{i18n['lbl.owner.personal_data.id_type']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneMenu id="idType" value="#{aSession.selectedRuatRegister.idType}" required="true" requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.select_one']}"
								itemValue="#{null}" noSelectionOption="true"  />
							<f:selectItems
								value="#{idetificationTypeCmb.parameterDTO.options}" />
						</p:selectOneMenu>
						<p:message for="idType" />
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.id_number']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText id="idNumber" value="#{aSession.selectedRuatRegister.idNumber}"
							required="true" requiredMessage="#{i18n['cmpnt.required']}"  maxlength="12" validatorMessage="Ingreso no válido">
							<f:validateRegex pattern="^[0-9]{4}[0-9]*$" /> 
						</p:inputText>	
						<p:message for="idNumber" />
						<pe:keyFilter for="idNumber" mask="int"/>
					</div>
				</div>
			</div>

			<div class="ui-form-row-2col clearfix">
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.educational_level']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:selectOneMenu id="educationalLevel"
							value="#{aSession.selectedRuatRegister.educationalLevel}" required="true" requiredMessage="#{i18n['cmpnt.required']}">
							<f:selectItem itemLabel="#{i18n['cmpnt.select_one']}"
								itemValue="" noSelectionOption="true"/>
							<f:selectItems
								value="#{educationalLevelCmb.parameterDTO.options}" />
						</p:selectOneMenu>
						<p:message for="educationalLevel" />
					</div>
				</div>
				<div class="ui-form-col">
					<div class="clearfix text-align-left">
						<h:outputLabel
							value="#{i18n['lbl.owner.personal_data.last_degree_approved']}" />
					</div>
					<div class="clearfix text-align-left">
						<p:inputText  maxlength="3" styleClass="input-number ui-width-xxxs" id="lastGrade" value="#{aSession.selectedRuatRegister.lastGrade}"
							 required="true" requiredMessage="#{i18n['cmpnt.required']}">
						<pe:keyFilter mask="int"/> 	
						</p:inputText>
						<p:message for="lastGrade" />
					</div>
				</div>
			</div>
		</div>

		<div class="buttons-container clearfix text-align-right">
			<p:commandButton value="#{i18n['lbl.flow_button.cancel']}"
				styleClass="ui-flowbutton"
				oncomplete="currentPage('list_owner_data.xhtml')"
				actionListener="#{stepByStepController.cancelRuatRegister}" />
			<p:commandButton value="#{i18n['lbl.flow_button.save_and_next']}"				
				styleClass="ui-flowbutton"
				oncomplete="setCurrentPageStyle(xhr, status, args,this)"
				validateClient="true" update="form_personal_data"
				actionListener="#{stepByStepController.viewContactData}"
				id="savenext" />
		</div>
		<p:blockUI block="savenext" trigger="savenext"/>
	</h:form>
</h:body>

</html>